<template>
  <div v-if="store">
    <div class="form-config">
      <div class="title">主表单名称</div>
      <div class="configuration">
        <el-input v-model="store.formId"></el-input>
      </div>
      <div class="title">全局配置项</div>
      <div class="configuration">
        <el-row>
          <el-col :span="6">
            <div class="prop-set-title">查看</div>
          </el-col>
          <el-col :span="18">
            <el-switch v-model="store.configuration.toView"></el-switch>
          </el-col>
        </el-row>
      </div>
      <div class="title">标签对齐方式</div>
      <div class="configuration">
        <el-radio-group size="small" v-model="store.root.config.labelPosition">
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
          <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>
      </div>
      <div class="title">表单标签宽度</div>
      <div class="configuration">
        <el-input-number
          v-model="store.root.config.labelWidth"
          :min="0"
          :max="200"
          :step="10"
        ></el-input-number>
      </div>

      <div class="title">初始化事件集合</div>
      <div class="configuration">
        <el-select
          v-model="store.beginEvents"
          clearable
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in store.eventCollection"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

     <models-define  :store="store"></models-define>

      <params-define :store="store"></params-define>

      <custom-events :store="store"></custom-events>

      <data-source :store="store"></data-source>

      <el-row type="flex" align="middle" style="padding: 5px 0px">
        <el-col :span="10">
          <div>提交拦截器</div>
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="editorinterceptor"
            circle
          ></el-button>
        </el-col>
      </el-row>

      <el-row type="flex" align="middle">
        <el-col :span="24">
          <div class="prop-set-title">系统字段选择</div>
        </el-col>
      </el-row>

      <el-row type="flex" align="middle">
        <el-col :span="6">
          <div class="prop-set-title">创建人</div>
        </el-col>
        <el-col :span="6">
          <el-switch v-model="store.tableConfig.creator"></el-switch>
        </el-col>
        <el-col :span="6">
          <div class="prop-set-title">创建时间</div>
        </el-col>
        <el-col :span="6">
          <el-switch v-model="store.tableConfig.create_time"></el-switch>
        </el-col>
      </el-row>

      <el-row type="flex" align="middle">
        <el-col :span="6">
          <div class="prop-set-title">更新人</div>
        </el-col>
        <el-col :span="6">
          <el-switch v-model="store.tableConfig.updater"></el-switch>
        </el-col>
        <el-col :span="6">
          <div class="prop-set-title">更新时间</div>
        </el-col>
        <el-col :span="6">
          <el-switch v-model="store.tableConfig.update_time"></el-switch>
        </el-col>
      </el-row>

      <el-row type="flex" align="middle">
        <el-col :span="6">
          <div class="prop-set-title">删除</div>
        </el-col>
        <el-col :span="6">
          <el-switch v-model="store.tableConfig.deleted"></el-switch>
        </el-col>
        <el-col :span="6">
          <div class="prop-set-title">禁用</div>
        </el-col>
        <el-col :span="6">
          <el-switch v-model="store.tableConfig.disabled"></el-switch>
        </el-col>
      </el-row>

      <el-row type="flex" align="middle">
        <el-col :span="6">
          <div class="prop-set-title">状态</div>
        </el-col>
        <el-col :span="6">
          <el-switch v-model="store.tableConfig.status"></el-switch>
        </el-col>
        <el-col :span="6">
          <div class="prop-set-title">版本号</div>
        </el-col>
        <el-col :span="6">
          <el-switch v-model="store.tableConfig.ver"></el-switch>
        </el-col>
      </el-row>
    </div>

    <el-dialog
      width="60%"
      title="提交拦截器"
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="innerVisible"
      append-to-body
    >
      <editor
        v-model="submitInterceptor"
        @init="editorInit"
        :options="editorOptions"
        lang="javascript"
        theme="chrome"
        width="100%"
        height="350"
      ></editor>
      <span slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyInterceptor">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import paramsDefine from "./params-define/";
import customEvents from "./custom-events/";
import dataSource from "./data-source/";
import modelsDefine from "./models-define/";
export default {
  props: ["store"],
  components: {
    paramsDefine,
    customEvents,
    dataSource,
    modelsDefine,
    editor: require("vue2-ace-editor"),
  },
  data() {
    return {
      submitInterceptor: "",
      innerVisible: false,
      active: "first",
      editorOptions: {
        enableBasicAutocompletion: true, // 启用基本自动完成
        enableSnippets: true, // 启用代码段
        enableLiveAutocompletion: true, // 启用实时自动完成
        printMarginColumn: 30,
        displayIndentGuides: false, // 显示参考线
        enableEmmet: true, // 启用Emmet
        tabSize: 5, // 标签大小
        fontSize: 12, // 设置字号
        useWorker: true, // 使用辅助对象
        showPrintMargin: false, //去除编辑器里的竖线
        enableMultiselect: true, //     选中多处
        readOnly: false, // 是否只读
        showFoldWidgets: true, // 显示折叠部件
        fadeFoldWidgets: true, // 淡入折叠部件
        wrap: true, //换行
      },
    };
  },
  mounted() {
    this.submitInterceptor = this.store.submitInterceptor;
  },
  methods: {
    editorinterceptor() {
      this.innerVisible = true;
    },
    modifyInterceptor() {
      this.store.submitInterceptor = this.submitInterceptor;
      this.innerVisible = false;
    },
    editorInit: function () {
      require("brace/ext/language_tools"); //language extension prerequsite...
      require("brace/theme/chrome");
      require("brace/mode/javascript"); //language
      require("brace/snippets/javascript"); //snippet
    },
  },
  watch: {
    innerVisible(val) {
      if (val) {
        this.submitInterceptor = this.store.submitInterceptor;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.form-config,
.box-model-config {
  padding-left: 10px;
}
.form-config .title,
.box-model-config .title {
  line-height: 32px;
  font-size: 14px;
}
.form-config .el-input-number,
.box-model-config .el-input-number {
  line-height: 30px;
}

::v-deep .el-button.is-circle {
  padding: 5px;
}
</style>